<template>
	<view class="user">
		<!-- 底图 - 开始 -->
		<view :style="{ height: statusBarHeight}"></view>
		<!-- 底图 - 结束 -->


		<!-- 充值优惠 - 开始 -->
		<!-- 充值优惠 - 结束 -->


		<!-- 用户信息 - 开始 -->
		<view class="user-info-box">
			<view class="user-info-item">
				<text class="user-info-item-num">{{ totalRecordsNum }}</text>
				<text class="user-info-item-label">记账总笔数</text>
			</view>
			<view class="user-info-item">
				<text class="user-info-item-num">{{ totalRecordDateNum }}</text>
				<text class="user-info-item-label">记账总天数</text>
			</view>
			<view class="user-info-item">
				<text class="user-info-item-num">{{ totalContinueNum }}</text>
				<text class="user-info-item-label">连续记账天数</text>
			</view>
		</view>


		<!-- 列表菜单 - 开始 -->
		<view class="user-activity-menu">

			<view class="menu-item" @click="goPage('/pages/accounts/accountList')">
				<view class="left">
					<text class="iconfont icon-zhangbenzhangdanjizhangzhangbu" style="font-size: 22px;"></text>
					<view class="menu-name">我的账单</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view>

			<view class="menu-item" @click="goPage('/pages/accounts/index')">
				<view class="left">
					<text class="iconfont icon-leimuguanli" style="font-size: 22px;"></text>
					<view class="menu-name">类目管理</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view>
			<view class="menu-item" @click="openImport">
				<view class="left">
					<text class="iconfont icon-shujuqianyi1" style="font-size: 22px;"></text>
					<view class="menu-name">数据迁移</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view>
			<view class="menu-item" @click="openImport2">
				<view class="left">
					<text class="iconfont icon-zhutise" style="font-size: 22px;"></text>
					<view class="menu-name">设置主图</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view>
			<!-- <view class="menu-item" @click="themeSetting">
				<view class="left">
					<text class="iconfont icon-zhutise" style="font-size: 22px;"></text>
					<view class="menu-name">主题设置</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view> -->
			<!-- <view class="menu-item" @click="goPage('contact')">
				<view class="left">
					<text class="iconfont icon-lianxiwomen" style="font-size: 22px;"></text>
					<view class="menu-name">联系我们</view>
				</view>
				<text class="iconfont icon-right ml-6 text-333"></text>
			</view> -->
			<!-- <view class="menu-item" @click="checkVerseion">
				<view class="left">
					<text class="iconfont icon-shouji" style="font-size: 22px;"></text>
					<view class="menu-name">检查新版本</view>
				</view>
				<view class="menu-number">{{ version }}</view>
			</view> -->
		</view>
		<!-- 列表菜单 - 结束 -->

		<settings ref="importSetting"></settings>
	</view>
</template>

<script>
	import {
		useSystem
	} from "@/store/theme";
	import settings from '@/components/settings/settings.vue';
	import dayjs from 'dayjs';
	import {
		getTotalRecordsNum,
		getTotalRecordDateNum,
		getAssetTotal
	} from '@/api/api.js';
	import {
		fmtNum,
		formatMoney
	} from '@/common/format.js'

	export default {
		data() {
			return {
				version: '1.0.0',

				totalRecordsNum: 0,
				totalRecordDateNum: 0,
				totalContinueNum: 0,

				assetTotal: {}
			};
		},
		computed: {
			statusBarHeight() {
				return (uni.getSystemInfoSync()).statusBarHeight + 20 + 'px'
			},
		},
		components: {
			settings
		},
		created() {
			let _this = this
			plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
				_this.version = appInfo.version
			});
		},
		onShow() {
			this.getData()
		},
		setup() {
			const systemTheme = useSystem()
			return {
				systemTheme
			}
		},
		methods: {
			themeSetting() {
				uni.showModal({
					title: '提示',
					content: '当前功能暂未开发',
					showCancel: false
				})
			},
			checkVerseion() {
				uni.request({
					url: 'https://bucket-img1000.oss-cn-hangzhou.aliyuncs.com/LPY-BILL_APK/lpy_bill_version.json',
					success: (res) => {
						console.log(res.data)
						if (res.data.edition_name === this.version) {

							uni.showModal({
								title: '提示',
								content: '当前为最新版本',
								showCancel: false
							})

						} else {
							this.goPage(
								'/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
								JSON.stringify(res.data))
						}

					},
					fail: (res) => {
						uni.showToast({
							title: "网络异常",
							icon: "error"
						})
					}
				});

			},
			formatMoney(num) {
				return formatMoney(num)
			},
			async getData() {
				//查询资产总计
				let assetTotal = await getAssetTotal();
				this.assetTotal = assetTotal

				// 查询记账总笔数
				let totalRecordsNum = await getTotalRecordsNum();
				console.log(totalRecordsNum)
				if (totalRecordsNum != null && totalRecordsNum.length > 0) {
					this.totalRecordsNum = totalRecordsNum[0].num;
				}
				// 查询记账总天数
				let totalRecordDateNum = await getTotalRecordDateNum();
				console.log(totalRecordDateNum)
				if (totalRecordDateNum != null && totalRecordDateNum.length > 0) {
					this.totalRecordDateNum = totalRecordDateNum.length;

					let continueNum = 0;

					let now = dayjs().format('YYYYMMDD');
					console.log(totalRecordDateNum)

					for (let i = totalRecordDateNum.length - 1; i >= 1; i--) {
						const item = totalRecordDateNum[i].date;
						if (item === now || parseInt(item) - parseInt(now) === -1) {
							continueNum++;

							for (let j = i; j >= 1; j--) {
								const tmpItem = totalRecordDateNum[j].date;
								const afterItem = totalRecordDateNum[j - 1].date;

								if (parseInt(tmpItem) - parseInt(afterItem) === 1) {
									continueNum++;
								} else {
									break;
								}
							}

							break;
						}

					}

					this.totalContinueNum = continueNum;

				}

			},
			openImport() {
				this.$refs.importSetting.handleSet()
			},
			openImport2() {
				uni.getSavedFileList({
					success: function({
						fileList
					}) {
						if (fileList.length > 0) {
							uni.removeSavedFile({
								filePath: res.fileList[0].filePath,
								complete: function(res) {
									console.log('清空原本的图片',res);
								}
							});
						}
					}
				})
				// this.$refs.importSetting2.handleSet()
				uni.chooseImage({
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						uni.saveFile({
							tempFilePath: tempFilePaths[0],
							success: function(res) {
								console.log('res.savedFilePath', res)
								let savedFilePath = res.savedFilePath;
								uni.setStorageSync('INDEX_IMG', savedFilePath)
								console.log('首页图',uni.getStorageSync('INDEX_IMG'))
							}
						});
					}
				});
			},
			/* 跳转页面 */
			goPage(pageName) {
				switch (pageName) {
					default:
						uni.navigateTo({
							url: pageName
						})
						break;
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F4F4F4;
	}
</style>

<style lang="scss">
	.recharge-money-title {
		font-size: 24rpx;
		margin-left: 10rpx;
		color: #333;
		
	}

	.user {
		.user-header-image {
			width: 100%;
		}

		.user-info-box {
			background: #ffffff;
			padding: 30rpx;
			margin: 0 20rpx 20rpx 20rpx;
			position: relative;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.user-info-item {
				text-align: center;
				display: flex;
				flex-direction: column;
			}


			.user-info-item-num {
				font-weight: bold;
			}

			.user-info-item-label {
				font-size: 10px;
			}
		}

		.user-recharge-wrapper {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 0 20rpx 20rpx 20rpx;
			// margin: -120rpx 20rpx 20rpx 20rpx;

			.user-recharge-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.recharge-info {
					.info-title {
						color: #333;
						font-size: 28rpx;
						font-weight: bold;
					}

					.info-content {
						color: #666;
						font-size: 24rpx;
					}
				}

				.recharge-button {
					background: white;
					color: #333;
					padding: 10rpx 20rpx;
					font-size: 22rpx;
					border-radius: 50rpx;
					flex-shrink: 0;
					border: 1rpx solid #dadbde;
				}
			}

			.recharge-user-money {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #333;

				.recharge-money {
					font-weight: bold;
					font-size: 30rpx;
				}

				.recharge-money::first-letter {
					font-size: 22rpx;
				}
			}


			.recharge-user-money-total {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #333;
				flex-direction: column;

				.recharge-money {
					font-weight: bold;
					font-size: 30rpx;
				}

				.recharge-money::first-letter {
					font-size: 22rpx;
				}
			}
		}

		.user-activity-menu {
			padding: 30rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 60rpx;

				.left {
					display: flex;
					align-items: center;

					.menu-icon {
						width: 40rpx;
						height: 40rpx;
					}


					.menu-name {
						font-size: 28rpx;
						margin-left: 20rpx;
						color: #333;
					}
				}

				.menu-number {
					font-size: 30rpx;
					color: #666666;
					letter-spacing: 2rpx;
				}
			}

			.menu-item:first-child {
				margin-top: 0;
			}
		}
	}
</style>